<template>
    <div class="api-content" :style="{'left' : left + 'px'}">
        <div v-if="file">
            <h2>{{file.title || file.url}}</h2>
            <el-divider></el-divider>
            <div class="fileBox">
                <h3 type="info">
                    <el-tag v-if="file.type == 'get'">GET</el-tag>
                    <el-tag v-if="file.type == 'post'" type="success">POST</el-tag>
                    <el-tag v-if="file.type == 'put'" type="warning">PUT</el-tag>
                    <el-tag v-if="file.type == 'delete'" type="danger">DEL</el-tag>&nbsp;&nbsp;
                    <el-button type="primary" style="float:right" :loading="loading" @click="send">发送</el-button>
                    <span class="url">{{file.url}}</span>
                    <div style="height:1px; width:100%;clear:both"></div>
                </h3>
            </div>
            <div v-if="file.query || file.body">
                <el-divider></el-divider>
                <h3>请求参数</h3>
                <requesterData :file="file" ref="requesterData"></requesterData>
            </div>
            <div>
                <el-divider></el-divider>
                <p>返回参数</p>
                <responseData :file="file" ref="responseData"></responseData>
            </div>
        </div>
    </div>
</template>

<script>

import requesterData from './requestData.vue';
import responseData from './responseData.vue';

import axios from 'axios'

export default {
    props: ['left'],
    components: {
        requesterData,
        responseData
    },
    mounted() {
        this.$bus.$on('activeFileData', res => {
            this.file = null;
            this.$nextTick(() => {
                this.file = res;
            });
        })
    },
    data() {
        return {
            loading: false,
            file: null,
        }
    },
    methods: {
        send() {
            this.loading = true;
            var _data = null;
            if (this.$refs.requesterData) {
                _data = this.$refs.requesterData.getOptions();
            }
            if (this.file.type == 'get') {
                var options = {};
                if (_data && _data.query) {
                    options.params = _data.query
                }
            } else if (this.file.type == 'put' || this.file.type == 'post' || this.file.type == 'delete') {
                var options = {};
                if (_data && _data.query) {
                    options.params = _data.query
                }
                if (_data && _data.body) {
                    options.data = _data.body
                }
            }
            options.method = this.file.type;
            options.url = this.$bus.IP + this.file.url;
            axios(options).then(res => {
                this.loading = false;
                this.$refs.responseData.setResponse(res.data);
            }).catch((res, b, c) => {
                this.loading = false;
                console.log(res, b, c);
            })
        }
    }
}
</script>

<style scoped>
.api-content {
    padding: 10px 30px 10px 30px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    user-select: text;
    overflow-y: auto;
}

.url {
    user-select: text;
    line-height: 40px;
}
</style>